<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>deviceparamet</title>
	<script type="text/javascript" src="js/vue.js"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<link rel="stylesheet" href="./css/reset.css">
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script src="./js/jquery-2.2.3.js"></script>
	
	<script src="./js/zfjly.js"></script>
	
	<style type="text/css">
		#app #deviceparamet{
			width: 80%;
		    margin: 20px auto;
		    text-align: left; 
		}
		#app #deviceparamet .fieldset-container{
			border: 1px solid #909399;
		    box-shadow:2px 2px 3px #C0C4CC;
		    padding: 10px 20px 0px ;
		}
		#app #deviceparamet .fieldset-container .el-form-item{
			margin-bottom: 10px;
		}
		#app .header-container{
			height: 50px; 
        	background-color:  #409EFF;
		}
		#app .header-container .title{
			line-height: 50px;
            color: #ffffff;
            text-align: left;
            font-weight: bold;
            margin-left: 10px;
		}

		#app #deviceparamet  .custom-fieldset{
			margin-top: 24px; 
		}
	
		#app #deviceparamet .progress-custom{
			display: inline-block;
			width: 600px;
            margin-left:15px ;
            margin-right:15px; 
		}
		#app #deviceparamet .btnbox{
			width: 98px;
		    margin-left: 30px;
		    padding-top: 50px;
		}
		#app #deviceparamet .btnbox button{
			display: block; 
		    margin-top: 15px; 
		}
		#app #deviceparamet .btnbox  .el-button+.el-button {
			margin-left:0px; 
		}
		#app #deviceparamet .btnbox1{
			width: 98px; 
		    margin-left: 30px; 
		}
		#app #deviceparamet .btnbox1 button{
			display: block; 
		    margin-top: 7px;
		}
		#app #deviceparamet .btnbox1  .el-button+.el-button {
			margin-left:0px; 
		}
		@media screen and (min-width: 768px) and (max-width: 992px ) {
			#app #deviceparamet{
				width: 95%;
				margin: 20px auto;
				text-align: left;
			}
			#app #deviceparamet .progress-custom{
				width: 400px;
			}
			#app #deviceparamet .el-form-item__label{
				width: 70px!important;
			}
			#app #deviceparamet .el-form-item__content{
				margin-left: 70px!important;
			}
		}
	</style>
</head>
<body>
	<div id="app">
		<div class="header-container">
	        <h3 class="title">执法记录仪采集系统</h3>
	    </div>
		<div id="deviceparamet">
		    <el-form :model="deviceForm"  ref="deviceForm" label-width="105px" class="demo-ruleForm deviceForm">
		        <el-row :gutter="20">
		            <el-col :span="12">
		            	<fieldset class="fieldset-container">
					       <legend>设置执法仪参数</legend>
					        <el-row>
		                        <el-col :span="12">
		                            <el-form-item label="产品序号">
		                                <el-input v-model="deviceForm.zfjlyInfor.cSerial" ></el-input>
		                            </el-form-item>
		                            <el-form-item label="警号">
		                                <el-input v-model="deviceForm.zfjlyInfor.userNo"></el-input>
		                            </el-form-item>
		                            <el-form-item label="姓名">
		                                <el-input v-model="deviceForm.zfjlyInfor.userName"></el-input>
		                            </el-form-item>
		                             <el-form-item label="单位编号">
		                                <el-input v-model="deviceForm.zfjlyInfor.unitNo"></el-input>
		                            </el-form-item>
		                             <el-form-item label="单位名称">
		                                <el-input v-model="deviceForm.zfjlyInfor.unitName"></el-input>
		                            </el-form-item>
		                        </el-col>
		                        <el-col :span="12">
		                            <div class="btnbox">
		                                <el-button type="primary" size="small" @click="getZFYInfoBtn">获取配置</el-button>
		                                <el-button type="primary" size="small" @click="setZFYInfoBtn">设置参数</el-button>
		                            </div>
                       			 </el-col>
                    		</el-row>
					   </fieldset>
		            </el-col>
		            <el-col :span="12">
		            	<fieldset class="fieldset-container">
					       <legend>电量</legend>
					       <el-row>
		                        <el-col :span="12">
		                            <el-form-item label="产品型号">
		                                <el-input v-model="deviceForm.name"></el-input>
		                            </el-form-item>
		                            <el-form-item label="电池电量">
		                                <el-input v-model="deviceForm.zfjlyBatteryInfor.BatteryElect"></el-input>
		                            </el-form-item>
		                        </el-col>
		                        <el-col :span="12">
		                            <div class="btnbox1">
		                                <el-button type="primary" size="small" @click="getBatteryBtn">读取</el-button>
		                                <el-button type="primary" size="small">读取</el-button>
		                            </div>
		                        </el-col>
                    		</el-row>
					    </fieldset>
					    <fieldset class="fieldset-container" style="margin-top: 22px">
					       <legend>密码设置</legend>
					        <el-row>
		                        <el-col :span="12">
		                            <el-form-item label="用户">
		                                <el-input v-model="deviceForm.name"></el-input>
		                            </el-form-item>
		                            <el-form-item label="密码">
		                                <el-input v-model="deviceForm.zfjlyPassword.User_passwd"></el-input>
		                            </el-form-item>
		                        </el-col>
		                        <el-col :span="12">
		                            <div class="btnbox1">
		                                <el-button type="primary" size="small" @click="getZFYPasswordBtn">读取</el-button>
		                                <el-button type="primary" size="small">设置</el-button>
		                            </div>
		                        </el-col>
		                    </el-row>
					    </fieldset>
		            
		            </el-col> 
		        </el-row>
		         <el-row :gutter="20" style="margin-top:20px">
		            <el-col :span="12">
		               <fieldset class="fieldset-container">
					       <legend>时间</legend>
					       <el-row>
		                        <el-col :span="12">
		                            <el-form-item label="时间">
		                                <el-input v-model="deviceForm.name"></el-input>
		                            </el-form-item>
		                        </el-col>
		                        <el-col :span="12" style="margin-top: 5px">
		                            <el-button type="primary" style="margin-left:20px" size="small">读取</el-button>
		                            <el-button type="primary" size="small">校时</el-button>
		                        </el-col>
		                    </el-row>
					    </fieldset>
		            </el-col>
		            <el-col :span="12">
		            	<fieldset class="fieldset-container">
					       <legend>SDK</legend>
					       <el-row>
		                        <el-col :span="12">
		                            <el-form-item label="SD卡信息容量">
		                                <el-input v-model="deviceForm.name"></el-input>
		                            </el-form-item>
		                        </el-col>
		                        <el-col :span="12" style="margin-top: 5px">
		                            <el-button type="primary" style="margin-left:20px" size="small">读取</el-button>
		                        </el-col>
		                    </el-row>
					    </fieldset>
		               
		            </el-col> 
		        </el-row>
		        <el-row  style="margin-top:20px">
		            <el-col :span="24">
		            	<fieldset class="fieldset-container">
					       <legend>参数设置</legend>
					       <el-row>
		                        <el-col :span="8">
		                            <el-form-item label="分辨率">
		                                <el-input v-model="deviceForm.name"></el-input>
		                            </el-form-item>
		                            <el-form-item label="图片大小">
		                                <el-input v-model="deviceForm.name"></el-input>
		                            </el-form-item>
		                            <el-form-item label="视频预录">
		                                <el-input v-model="deviceForm.name"></el-input>
		                            </el-form-item>
		                           <el-form-item label="定时关机">
		                                <el-input v-model="deviceForm.name"></el-input>
		                            </el-form-item>
		                            <el-form-item label="红外切换">
		                                <el-input v-model="deviceForm.name"></el-input>
		                            </el-form-item>
		                        </el-col>
		                        <el-col :span="8">
		                            <el-form-item label="视频质量">
		                                <el-input v-model="deviceForm.name"></el-input>
		                            </el-form-item>
		                            <el-form-item label="视频分段">
		                                <el-input v-model="deviceForm.name"></el-input>
		                            </el-form-item>
		                            <el-form-item label="视频延录">
		                                <el-input v-model="deviceForm.name"></el-input>
		                            </el-form-item>
		                            <el-form-item label="定时关屏">
		                                <el-input v-model="deviceForm.name"></el-input>
		                            </el-form-item>
		                            <el-form-item label="连拍">
		                                <el-input v-model="deviceForm.name"></el-input>
		                            </el-form-item>
		                        </el-col>
		                        <el-col :span="8">
		                            <div class="btnbox">
		                                <el-button type="primary" size="small" @click="getParamBtn">获取配置</el-button>
		                                <el-button type="primary" size="small">设置参数</el-button>
		                            </div>
		                        </el-col>
		                    </el-row>
					    </fieldset>
		              
		            </el-col>
		        </el-row>
		        <el-row  style="margin-top:20px" class="file-operation">
		            <el-col :span="24">
		            	<fieldset class="fieldset-container">
					       <legend>文件操作</legend>
							         <el-upload
		                        class="upload-demo"
		                        ref="upload"
		                        action="https://jsonplaceholder.typicode.com/posts/"
		                        :auto-upload="false">
		                        <el-button size="small" slot="trigger" type="primary">进入盘</el-button>
		                        <el-button size="small"  slot="trigger" type="primary">选择上传路径</el-button>
		                        <el-button style="margin-left: 10px;" size="small" type="primary" @click="submitUpload">上传文件</el-button>
		                    </el-upload>
		                    <div style="margin-top: 20px">
		                        <p>文件路径:<span>D:/</span></p>
		                    </div>
		                    <div style="margin-top: 20px; margin-bottom: 20px">
		                        <label>
		                            文件信息:
		                        </label>
		                        <el-progress :text-inside="false" :stroke-width="18" :percentage="70" status="success" :show-text="false" class="progress-custom"></el-progress>
		                        <span>35M/128G</span>
		                    </div >
					    </fieldset>
		            </el-col>
		        </el-row>
		    </el-form>
		  </div>
	</div>
	<script>
		let zfjly = new ZFJLY()
		new Vue({
		  el: '#app',
		  data () {
		    return {
		        deviceForm: {
					zfjlyInfor: {

					},
					zfjlyBatteryInfor: {

					},
					zfjlyPassword:{

					}
		        }
		    }
		  },
		  mounted () {
			this._initZFJLY()
		  },
		  methods: {
			getZFYInfoBtn () {
				zfjly.GetZFYInfo(res =>{
					this.deviceForm.zfjlyInfor = res
				})
			},
			setZFYInfoBtn () {
				zfjly.WriteZFYInfo()
			},
			getBatteryBtn () {
				zfjly.ReadDeviceBatteryDumpEnergy(res => {
					this.deviceForm.zfjlyBatteryInfor = res
				})
			},
			getZFYPasswordBtn () {
				zfjly.GetZFYPassword(res => {
					this.deviceForm.zfjlyPassword = res
				})
			},
			getParamBtn () {
				zfjly.GetDevParam_Resolution(res => {
					let result = res.dev_param.split("+")
					console.log(result)
				})
				zfjly.GetDevParam_PhotoSize(res => {
					console.log(res)
				})
				zfjly.GetDevParam_Recording(res => {
					console.log(res)
				})
				zfjly.GetDevParam_Shutdown(res => {
					console.log(res)
				})
				zfjly.GetDevParam_Infrared(res => {
					console.log(res)
				})
				zfjly.GetDevParam_Video_quality(res => {
					console.log(res)
				})
				zfjly.GetDevParam_Video_split_time(res => {
					console.log(res)
				})
				zfjly.GetDevParam_Post_recording(res => {
					console.log(res)
				})
				zfjly.GetDevParam_Lcd_brightness(res => {
					console.log(res)
				})
				zfjly.GetDevParam_Capture(res => {
					console.log(res)
				})
			},
		    submitUpload () {
		        console.log(1)
			},
			_initZFJLY () {
				zfjly.ConnectZFJLY()
			}
		  },
		})
	</script>
	<script>
		var gui = require('nw.gui');
		// Extend application menu for Mac OS
		if (process.platform == "darwin") {
		var menu = new gui.Menu({type: "menubar"});
		menu.createMacBuiltin && menu.createMacBuiltin(window.document.title);
		gui.Window.get().menu = menu;
		}
		var win = gui.Window.get();
		win.showDevTools();
	</script>
	<!-- <script src="zfy.js"></script> -->
</body>
</html>